<script setup lang="ts">
import { computed, ref } from 'vue';
import { useSect } from '../../../composables';
import SectInfo from './sect-info.vue';

const emit = defineEmits<{
  (e: 'change-scene', id: string): void;
}>();

const { state: sectState } = useSect();

const sceneList = ref([
  {
    id: 'sect-steward-hall',
    name: '执事堂',
  },
  {
    id: 'cultivation-spot',
    name: '修炼场',
  },
  {
    id: 'sect-job-hall',
    name: '职务堂',
  },
  {
    id: 'scripture-hall',
    name: '藏书阁',
  },
]);

const currentSectInfo = computed(() => {
  return sectState.value.sectList.find(
    (item) => item.config.id === sectState.value.currentSect
  );
});

function onSceneClick(id: string) {
  emit('change-scene', id);
}
</script>

<template>
  <div v-if="currentSectInfo" class="w-full h-full flex flex-col">
    <div
      class="flex-none py-2 text-lg font-bold text-center border-0 border-b border-solid border-border"
    >
      {{ currentSectInfo.config.name }}
    </div>
    <div class="flex-none px-2 pt-2">
      <sect-info></sect-info>
    </div>
    <div class="flex-1 overflow-auto p-2">
      <div class="grid grid-cols-2 gap-2">
        <div v-for="scene in sceneList" :key="scene.id" class="w-full">
          <a-button size="large" :block="true" @click="onSceneClick(scene.id)">
            {{ scene.name }}
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
